<template>
  <div class="scenicList">
    <div class="fixBox">
      <div class="headline">
        <hgroup>
          <h2>文化海洋</h2>
          <span>寻找学习中的快乐</span>
        </hgroup>
        <img src="../../assets/headerline.png" alt="">
      </div>
      <!-- 引入搜索框组件 -->
      <searchBar v-on:listenChanges="listenSearchVal"></searchBar>
    </div>
    <div class="scrollBox">
      <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" >
        <ul class="spotItem clearfix">
          <li class="spotLis" v-for="spotLis in articleList" v-bind:key="spotLis.id" @click="showDetials(spotLis.id)">
            <!-- <img class="spotLisCont fl" :src="ListImg"></img> -->
            <span class="spotTitle">{{spotLis.name}}</span>
          </li>
        </ul>
      </v-scroll>
    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
import searchBar from '../overallModules/searchBar'
import Scroll from '../overallModules/handRefresh' // 引入上拉加载下拉刷新

export default {
  name: 'scenicList',
  components: {
    searchBar,
    'v-scroll': Scroll
  },
  data () {
    return {
      spinShow: true,
      loadingText: '加载中...',
      current: 1, // 当前页面
      pageSize: 10, // 一次显示多少条
      articleList: [], // 存放数据
      searchVal: '诗' // 搜索框输入的值
    }
  },
  mounted () {
    let _this = this
    let url = '/getList/TangShiSongCi/Search?key=f1a9930edce84fb1a16b3befe2281616&keyWord=' + _this.searchVal + '&page=1&rows=' + _this.pageSize
    this.axios.get(url).then(function (response) {
      // console.log(response.data.result)
      _this.articleList = response.data.result // 获取模拟的动态数据
      // console.log(response.data)
      _this.spinShow = false
    }).catch(function (response) {
      // console.log(response)
      alert('Data request failed!')
    })
  },
  methods: {
    listenSearchVal: function (val) { // 从子组件接收一个搜索的参数
      let _this = this
      _this.searchVal = val
      // console.log(val)
      if (!_this.searchVal) {
        alert('输入你要查找的内容')
        return false
      }
      _this.spinShow = true // 打开数据加载loading
      let url = '/getList/TangShiSongCi/Search?key=f1a9930edce84fb1a16b3befe2281616&keyWord=' + _this.searchVal + '&page=1&rows=' + _this.pageSize
      _this.axios.get(url).then(function (response) {
        console.log(response)
        _this.articleList = response.data.result // 获取模拟的动态数据
        if (_this.articleList.length < 10) _this.loadingText = '已无更多数据~'
        _this.spinShow = false
      }).catch(function (response) {
        // console.log(response)
        alert('试试搜索其他的热词吧~')
      })
    },
    showDetials: function (id) { // 展示诗词详情 id为诗词的标识id
      let _this = this
      _this.$router.push({path: '/poetryDetial', query: {id: id}}) // 引入详情页 传详情参数过去
    },
    onRefresh (done) {
      let _this = this
      // _this.loadingText = '加载中……'
      let url = '/getList/TangShiSongCi/Search?key=f1a9930edce84fb1a16b3befe2281616&keyWord=' + _this.searchVal + '&page=1&rows=' + _this.pageSize
      _this.axios.get(url).then(function (response) {
        // console.log(response)
        let arr = response.data.result
        if (arr.length) { // 存在数据
          _this.articleList = arr
          if (arr.length === _this.pageSize) {
            _this.current = 2
          }
          done() // call done
        } else {
          alert('暂无数据更新~')
        }
        _this.spinShow = false
      }).catch(function (response) {
        // console.log(response)
        alert('Data request failed!')
      })
    },
    onInfinite (done) { // 上拉加载
      let _this = this
      if (_this.current <= 1) _this.current = 2
      let url = '/getList/TangShiSongCi/Search?key=f1a9930edce84fb1a16b3befe2281616&keyWord=' + _this.searchVal + '&page=' + _this.current + '&rows=' + _this.pageSize
      _this.axios.get(url).then(function (response) {
        let arr = response.data.result
        if (arr.length) { // 存在数据
          _this.articleList = _this.articleList.concat(arr)
          if (arr.length < _this.pageSize) {
            _this.loadingText = '没有更多数据了~'
            // vm.$el.querySelector('.load-more').style.display = 'none'
            return
          } else {
            _this.current++
          }
          done() // call done
        } else {
          _this.loadingText = '没有更多数据了~'
        }
        _this.spinShow = false
      }).catch(function (response) {
        // console.log(response)
        // alert('Data request failed!')
        _this.loadingText = '没有更多数据了~'
        return false
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import '../../../static/css/page/scenicList.scss'
</style>
